<template>
  <div class="tree-container">
    <el-button type="primary" size="small">添加作战能力</el-button>
    <el-tree
      :data="treeData"
      node-key="id"
      accordion
      @node-click="handleLeftclick"
      :default-expanded-keys="nodeExopand"
      @node-contextmenu="rightClick"
      ref="tree"
    >
      <span class="slot-t-node" slot-scope="{ node }">
        <span>{{ node.label }}</span>
      </span>
    </el-tree>
    <div class="box-card" ref="card" v-show="menuVisible">
      <div class="add item" @click="addChildDevice()">
        <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;新增模型
      </div>
      <div class="delete item" @click="deleteNode()">
        <i class="el-icon-remove-outline"></i>&nbsp;&nbsp;删除
      </div>
      <div class="edit item" @click="editNode()">
        <i class="el-icon-edit"></i>&nbsp;&nbsp;修改
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodeExopand: [],
      eleId: "",
      isShow: false,
      currentData: "",
      currentNode: "",
      menuVisible: false,
      firstLevel: false,
      maxexpandId: 4,
      treeData: [
        {
          id: 1,
          label: "一级 1",
          isEdit: false,
          type: "device",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              isEdit: false,
              type: "device",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  isEdit: false,
                  type: "model",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  isEdit: false,
                  type: "device",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          isEdit: false,
          type: "device",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              isEdit: false,
              type: "device",
            },
            {
              id: 6,
              label: "二级 2-2",
              isEdit: false,
              type: "model",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          isEdit: false,
          type: "device",
          children: [
            {
              id: 7,
              label: "二级 3-1",
              isEdit: false,
              type: "model",
            },
            {
              id: 8,
              label: "二级 3-2",
              isEdit: false,
              type: "device",
              children: [
                {
                  id: 11,
                  label: "三级 3-2-1",
                  isEdit: false,
                  type: "device",
                },
                {
                  id: 12,
                  label: "三级 3-2-2",
                  isEdit: false,
                  type: "device",
                },
                {
                  id: 13,
                  label: "三级 3-2-3",
                  isEdit: false,
                  type: "model",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    // 鼠标右击事件
    rightClick(event, object, Node) {
      this.currentData = object;
      this.currentNode = Node;
      if (Node.level === 1) {
        this.firstLevel = true;
      } else {
        this.firstLevel = false;
      }
      this.menuVisible = true;
      // let menu = document.querySelector('#card')
      // /* 菜单定位基于鼠标点击位置 */
      // menu.style.left = event.clientX + 'px'
      // menu.style.top = event.clientY + 'px'
      document.addEventListener("click", this.foo);
      this.$refs.card.style.left = event.clientX + 10 + "px";
      this.$refs.card.style.top = event.clientY - 60 + "px";
    },
    // 鼠标左击事件
    handleLeftclick() {
      this.foo();
    },
    //  取消鼠标监听事件 菜单栏
    foo() {
      this.menuVisible = false;
      //  要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      document.removeEventListener("click", this.foo);
    },

    addChildDevice() {
      this.$router.push("/app/operationalCapability/CapabilityView");
    },
    deleteNode() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$refs.tree.remove(this.currentNode);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    // 增加子级节点事件
    addChildNode() {
      if (this.currentNode.level >= 3) {
        this.$message.error("最多只支持三级！");
        return false;
      }
      let id = Math.ceil(Math.random() * 100);
      var data = { id: id, label: "新增节点" };
      this.$refs.tree.append(data, this.currentNode);
      this.nodeExopand = [this.currentNode.id];
    },
    // 删除节点
    // deleteNode() {
    //   this.$refs.tree.remove(this.currentNode);
    // },
    // 编辑节点
    editNode(data) {
      this.currentData = data ? data : this.currentData;
      if (!this.currentData.isEdit) {
        this.$set(this.currentData, "isEdit", true);
      }
      // 获取焦点
      this.$nextTick(() => {
        this.$refs["slotTreeInput" + this.currentData.id].focus();
      });
    },
  },
  mounted() {},
};
</script>
<style lang="scss">
.tree-container {
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__content {
    font-size: 18px;
    height: 32px;
    margin: 2px 0;
  }
  .el-tree-node__content:hover,
  .el-upload-list__item:hover {
    background-color: #5ba1f1;
    color: #fff;
  }
  .el-tree-node:focus > .el-tree-node__content {
    background: #07f;
    color: #fff;
  }
  .is-current > .el-tree-node__content {
    background: #07f;
    color: #fff;
  }
}
.add {
  cursor: pointer;
  margin-top: 10px;
}

.delete {
  margin: 10px 0;
  cursor: pointer;
}

.edit {
  margin-bottom: 10px;
  cursor: pointer;
}

.search {
  cursor: pointer;
}

.box-card {
  width: 150px;
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 8px;
  .item:hover {
    background: #5ba1f1;
    color: #fff;
  }
  .item:active {
    background: #07f;
    color: #fff;
  }
}
</style>
